<!-- 围栏地图页 -->
<template>
  <div style="height: 6vh;background-color: #fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">新增围栏</span>
    <el-button type="primary" style="float: right;margin-top: 13px;"
               @click="router.push('/geofence')">返回</el-button>
  </div>
  <!-- 第6步:创建地图容器元素 -->
  <div id="mapContainer" style="width: 100%;height: 84vh;"></div>

  <!-- 新增电子围栏管理 -->
  <el-dialog title="围栏信息" v-model="dialogVisible">
    <el-form>
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup>

import router from "@/router";
import {nextTick, onMounted, ref} from "vue";

const dialogVisible = ref(false);

onMounted(()=>{
  //表示在DOM更新之后再执行，因为我们要确保上方div创建之后再给div里渲染地图
  nextTick(()=>{
    //第7步:创建地图示例,注意:不要引入,忽略提示!
    let map = new BMapGL.Map("mapContainer");
    //第8步:设置中心点坐标，设置经纬度
    let point = new BMapGL.Point(116.4074,39.9024);
    //第9步：设置地图显示的中心点与地图缩放级别
    map.centerAndZoom(point,15);

    //添加地图绘制控件
    //1.创建绘制场景类，这是其他绘制控件使用的基类，注意：DrawScene需要导入
    const scene = new DrawScene(map);
    //2.创建绘制控件类，并将上一回创建好的绘制场景作为构造参数传入，注意：DrawControl也需要导入
    new DrawControl(scene,{
      //3.绘制控件配置项：
      //3.1 不显示对应图标的用途提示
      enableTips:false,
      //3.2 设置绘制控件的显示位置（右上角）
      anchor:BMAP_ANCHOR_TOP_RIGHT,
      //3.3 设置绘制控件显示哪些绘制项 circle圆形 rectangle
      drawingItems:[
          'circle',
          'rectangle'
      ]
    });
    //4.将绘制控件添加到地图上
    map.addControl(drawContrl);
  })
})
</script>

<style scoped>

</style>